<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0"><img src="../assets/2.png"></el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/">主页</el-menu-item>
    <el-menu-item index="/login">登录</el-menu-item>
    <el-sub-menu index="3">
      <template #title>下拉菜单</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>
<script>
import { ref } from '@vue/reactivity'
import router from '@/router'
export default {
  name: 'AppNavigation',
  setup() {
    const activeIndex = ref(null)
    function handleSelect(index) {
      console.log('menu click: ', index)
      router.push(index)
    }
    return { handleSelect, activeIndex }
  }
}
</script>

<style lang="scss" scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
